<template>
  <div class="app-container">
    <el-form ref="unit" :model="queryParams" label-width="80px" :inline="true" v-show="showSearch">
      <el-form-item label="单位编码">
        <el-input v-model="queryParams.code"></el-input>
      </el-form-item>
      <el-form-item label="单位名称">
        <el-input v-model="queryParams.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExcel_export">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="unitList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单位编码" align="center" prop="measureCode" />
      <el-table-column label="单位名称" align="center" prop="measureName" />
      <el-table-column label="是否启用" align="center" prop="enableFlag">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" class="delred">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :v-show="true" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改单位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="dmlform" :model="dmlform" :rules="rules" label-width="150px">
        <el-form-item label="单位编码" prop="measureCode">
          <el-input v-model="dmlform.measureCode" placeholder="请输入单位编码" />
        </el-form-item>
        <el-form-item label="单位名称" prop="measureName">
          <el-input v-model="dmlform.measureName" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="是否启用" prop="enableFlag">
          <el-radio-group v-model="dmlform.enableFlag">
            <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dmlform.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导出excel筛选 -->
    <el-dialog title="导出excel筛选" :visible.sync="exportopen" width="600px" append-to-body>
      <el-form ref="exportExcel" :model="exportExcel" label-width="150px" label-position="left">
        <el-form-item label="查询时间" prop="excelTime">
          <el-date-picker
            v-model="exportExcel.excelTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="center"
        /></el-form-item>

        <el-form-item label="单位编码" prop="measureCode">
          <el-input v-model="exportExcel.measureCode" placeholder="请输入单位编码" />
        </el-form-item>
        <el-form-item label="单位名称" prop="measureName">
          <el-input v-model="exportExcel.measureName" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="是否启用" prop="enableFlag">
          <el-radio-group v-model="exportExcel.enableFlag">
            <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExcelForm">导出</el-button>
        <el-button @click="exportopen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUnitmeasure,
  listPrimaryUnitmeasure,
  getUnitmeasure,
  delUnitmeasure,
  addUnitmeasure,
  updateUnitmeasure,
  exportUnit,
} from '@/api/basisManagement/unit.js'
import { debounce } from '@/utils'

export default {
  name: 'unit',
  dicts: ['sys_yes_no'],
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: false,
      // 非单个禁用
      single: true,
      multiple: false,
      total: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        code: null,
        name: null,
      },

      unitList: [],
      //模态框名称
      title: '新增',
      open: false,
      exportopen: false,
      dmlform: {
        measureCode: '',
        measureName: '',
        enableFlag: '',
        remark: '',
      },
      rules: {
        measureCode: [{ required: true, message: '单位编码不能为空', trigger: 'blur' }],
        measureName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
        enableFlag: [{ required: true, message: '是否启用不能为空', trigger: 'blur' }],
      },
      ids: [],
      idsName: [],
      exportExcel: {
        excelTime: [],
        measureCode: '',
        measureName: '',
        enableFlag: '',
      },

      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams.code = null
      this.queryParams.name = null
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleAdd() {
      this.reset()
      this.title = '新增'
      this.open = true
    },
    handleUpdate(row) {
      this.reset()
      this.open = true
      this.title = '修改'
      const measureId = row.measureId || this.ids
      getUnitmeasure(measureId).then((response) => {
        this.dmlform = response.data
      })
    },
    handleDelete(row) {
      const measureIds = row.measureId || this.ids
      const idsName = row.measureName || this.idsName
      this.$modal
        .confirm('是否确认删除单位编号为"' + idsName + '"的数据项？')
        .then(function () {
          return delUnitmeasure(measureIds)
        })
        .then((response) => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },

    // 获取list
    getList() {
      this.loading = true
      listUnitmeasure(this.queryParams).then((response) => {
        this.unitList = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.measureId)
      this.idsName = selection.map((item) => item.measureName)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    submitForm() {
      this.$refs['dmlform'].validate((valid) => {
        if (valid) {
          if (this.dmlform.measureId != null || this.dmlform.measureId == '') {
            updateUnitmeasure(this.dmlform).then((response) => {
              if (response.data == 1) {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getList()
              }
            })
          } else {
            addUnitmeasure(this.dmlform).then((response) => {
              if (response.code==200) {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getList()
              }else if(response.code==210){
                this.$notify.error("新增失败（null）,联系技术人员")
              }
            })
          }
        }
      })
    },
    //取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.dmlform = {
        measureId: null,
        measureCode: null,
        measureName: null,
        enableFlag: 'Y',
        remark: null,
      }
      this.resetForm('dmlform')
    },

    //excel导出
    handleExcel_export() {
      this.exportopen = true
    },

    async submitExcelForm() {
      this.exportExcel.starttime=this.exportExcel.excelTime[0];
      this.exportExcel.endtime=this.exportExcel.excelTime[1];
      await exportUnit(this.exportExcel)
      this.exportopen=false;
    },
  },
}
</script>

<style lang="scss" scoped>
.delred {
  ::v-deep .el-icon-delete {
    color: #f56c6c;
  }
  ::v-deep span {
    color: #f56c6c;
  }
}
</style>
